<template>
  <div>
    <div>
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="$router.back()"
      />
      <van-dropdown-menu v-if="goodslist.length > 0">
        <van-dropdown-item
          v-model="sort"
          :options="option"
          @change="changesort"
        />
      </van-dropdown-menu>
      <van-empty v-if="goodslist.length === 0">暂无商品</van-empty>
      <div class="goods">
        <goodsitem
          v-for="item in goodslist"
          id="goodslist"
          :key="item.id"
          :url="item.img_url"
          :describe="item.title"
          @click="$router.push(`/particulars/${item.id}`)"
        >
          <template #default>
            <div class="price">
              <span class="new-price">￥{{ item.sell_price }}</span
              ><span class="old-price">￥{{ item.market_price }}</span>
            </div>
            <div class="text">
              <span>热卖中</span><span>剩余{{ item.stock_quantity }}件</span>
            </div>
          </template>
        </goodsitem>
      </div>
    </div>
  </div>
</template>

<script setup>
import { search } from "@/api";
import goodsitem from "@/components/GoodsItem.vue";
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
const $route = useRoute();
const $router = useRouter();

const value = $route.params.value;
const page = ref(1);
const pagesize = ref(10);
const goodslist = ref([]);
const sort = ref("buy");
const option = ref([
  { text: "销量排序", value: "buy" },
  { text: "好评排序", value: "likes" },
  { text: "价格排序", value: "sell_price" },
]);

const changesort = () => {
  getsearch();
};

const onSearch = () => {
  getsearch();
  $router.replace(`/searchresult/${value}`);
};

const getsearch = async () => {
  let data = await search(value, sort.value, page.value, pagesize.value);
  goodslist.value = data;
};

onMounted(() => {
  getsearch();
});
</script>

<style lang="scss" scoped>
.van-empty {
  font-size: 16px;
  color: #969799;
}

.goods {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  margin-bottom: 50px;

  #goodslist {
    margin: 5px;
  }

  .price {
    .new-price {
      margin-right: 10px;
      font-size: 16px;
      color: orange;
    }

    .old-price {
      font-size: 12px;
      text-decoration: line-through;
    }
  }

  .text {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
  }
}
</style>






